---
title: Despliega tu proyecto de Astro en GitHub pages
description: Cómo desplegar tu proyecto de Astro usando GitHub Pages.
type: deploy
i18nReady: true
---

Puedes usar [GitHub pages](https://pages.github.com/) para desplegar tu proyecto de Astro directamente desde un repositorio en [GitHub.com](https://github.com/).

## Cómo desplegar

Puedes desplegar un proyecto de Astro en GitHub Pages usando [GitHub Actions](https://github.com/features/actions) para construir y desplegar tu proyecto automáticamente. Para hacer esto, tu código fuente debe estar alojado en GitHub.

Astro mantiene la acción oficial `withastro/action` para desplegar tu proyecto con muy poca configuración. Sigue las instrucciones a continuación para desplegar tu proyecto de Astro en GitHub Pages y consulta el [README](https://github.com/withastro/action) si necesitas más información.

## Configura Astro para GitHub Pages

### Desplegando a una URL `github.io`

Configura las opciones [`site`](/es/reference/configuration-reference/#site) y, si es necesario, [`base`](/es/reference/configuration-reference/#base) en `astro.config.mjs`.

```js title="astro.config.mjs" ins={4-5}
import { defineConfig } from 'astro/config'

export default defineConfig({
  site: 'https://astronaut.github.io',
  base: 'mi-repo',
})
```

#### `site`

El valor de `site` debe ser uno de los siguientes:

- El siguiente URL basado en el nombre de tu usuario: `https://<username>.github.io`
- El URL autogenerado aleatorio para una [página privada de una organización de GitHub](https://docs.github.com/en/enterprise-cloud@latest/pages/getting-started-with-github-pages/changing-the-visibility-of-your-github-pages-site): `https://<random-string>.pages.github.io/`


#### `base`

Un valor para `base` puede ser requerido para que Astro trate el nombre de tu repositorio (por ejemplo, `/mi-repo`) como la raíz de tu sitio web.

:::note
  No configures un valor para `base` si:

- Tu página se sirve desde la carpeta raíz.
- Tu repositorio está ubicado en `https://github.com/<USUARIO>/<USUARIO>.github.io`.
:::

:::caution
    Cuando este valor está configurado, todos los enlaces internos de tu página deben tener el prefijo del valor de `base`:

```astro ins="/mi-repo"
<a href="/mi-repo/acerca">Acerca</a>
```

Ve más sobre [como configurar un valor `base`](/es/reference/configuration-reference/#base)
:::

### Usando GitHub pages con un dominio personalizado

:::tip[Configurar un dominio personalizado]
Puedes configurar un dominio personalizado agregando el siguiente archivo `./public/CNAME` a tu proyecto:

```js title="public/CNAME"
sub.mydomain.com
```

Esto desplegará tu proyecto en el dominio personalizado en lugar de `user.github.io`. No olvides también [configurar el DNS en el proveedor de dominio](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-a-subdomain).
:::

Para configurar Astro para usar GitHub pages con un dominio personalizado, configura tu dominio como el valor de `site`. No configures un valor para `base`:

```js title="astro.config.mjs" ins={4}
import { defineConfig } from 'astro/config'

export default defineConfig({
  site: 'https://example.com',
})
```

## Configurar una acción de GitHub

1. Crea un nuevo archivo en tu proyecto en `.github/workflows/deploy.yml` y pega el siguiente YAML.

    ```yaml title="deploy.yml"
    name: Deploy to GitHub Pages

    on:
      # Activa el flujo de trabajo cada vez que hagas push a la rama `main`
      # Usando un nombre de rama diferente? Reemplaza `main` con el nombre de tu rama
      push:
        branches: [ main ]
      # Te permite ejecutar este flujo de trabajo manualmente desde la pestaña Acciones en GitHub.
      workflow_dispatch:
      
    # Permite que este trabajo clone el repositorio y cree un despliegue de página
    permissions:
      contents: read
      pages: write
      id-token: write

    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
          - name: Checkout your repository using git
            uses: actions/checkout@v4
          - name: Install, build, and upload your site
            uses: withastro/action@v2
            # con:
              # path: . # La ubicación raíz de tu proyecto de Astro dentro del repositorio. (opcional)
              # node-version: 20 # La versión específica de Node que debería usarse para construir tu sitio. Por defecto es 20. (opcional)
              # package-manager: pnpm@latest # El gestor de paquetes de Node que debería usarse para instalar dependencias y construir tu sitio. Detectado automáticamente basado en tu lockfile. (opcional)

      deploy:
        needs: build
        runs-on: ubuntu-latest
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        steps:
          - name: Deploy to GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v4
    ```

    :::note
    La acción de astro toma algunas entradas opcionales. Estas pueden ser proporcionadas descomentando la línea `with:` y la entrada que quieres usar.
    :::
    
    :::caution
    La [acción](https://github.com/withastro/action) oficial de Astro escanea el lockfile para detectar tu gestor de paquetes preferido (`npm`, `yarn`, `pnpm`, o `bun`). Debes incluir el archivo `package-lock.json`, `yarn.lock`, `pnpm-lock.yaml` o `bun.lockb` en tu repositorio.
    :::

2. En GitHub, ve a la pestaña **Settings** de tu repositorio y encuentra la sección **Pages** de la configuración.

3. Elige **GitHub Actions** como el **Source** de tu sitio.

4. Haz commit del nuevo archivo de flujo de trabajo y haz push a GitHub.

  
¡Tu sitio debería estar publicado ahora! Cuando hagas push a los cambios en el repositorio de tu proyecto de Astro, la acción de GitHub los desplegará automáticamente por ti.

